


let layer = null

function drawSimple(h) {
  return h(
    'view',
    {
      attrs: {
        src: '',
      },
      styles: {},
    },
    [
      h(
        'view',
        {
          styles: {
            margin: 10,
          },
        },
        [
          h(
            'view',
            {
              styles: {
                display: 'flex',
                alignItems: 'center'
              },
            },
            [
              h(
                'view',
                {
                  styles: {
                    flex: 1,
                    paddingLeft: 10,
                    borderLeftWidth: 15,
                    borderColor: '#8170ff',
                  },
                },
                [
                  h(
                    'text',
                    {
                      styles: {
                        fontSize: 30,
                        lineHeight: 30,
                      },
                    },
                    'Hello !'
                  ),
                ]
              ),
              h('view', { styles: { flex: 1, textAlign: 'right' } }, [
                h('image', {
                  styles: {
                    height: 50,
                    width: 50,
                    display: 'inline-block',
                    borderRadius: 4
                  },
                  attrs: {
                    mode: 'aspectFill',
                    src:
                      '',
                  },
                }),
              ]),
            ]
          ),
        ]
      ),
    ]
  )
}
function drawListItem(h, tag) {
  return h(
    'view',
    {
      data: {
        tag
      },
      styles: {
        borderBottomWidth: 0.5,
        borderColor: '#ccc',
        borderStyle: 'solid',
        display: 'flex',
        paddingTop: 5,
        paddingRight: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        marginBottom: 10,
      },
      on: {
        click(e) {
          e.currentTarget.setStyles({
            width: 200
          })
          console.log(e.currentTarget)
        },
      },
    },
    [
      h(
        'view',
        {
          styles: {
            width: 50,
          },
        },
        [
          h('image', {
            attrs: {
              mode: 'aspectFill',
              src:
                'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1709216491,2536617744&fm=26&gp=0.jpg',
            },
            styles: {
              borderRadius: 24,
              width: 50,
              height: 50,
              borderWidth: 0.5,
              borderColor: '#ccc'
            },
          }),
        ]
      ),
      h('view', { styles: { flex: 2, paddingLeft: 10 } }, [
        h('view', {}, [
          h('text', { styles: { fontSize: 16 } }, '开发指南'),
        ]),
        h(
          'view',
          {
            styles: {},
          },
          [
            h(
              'text',
              { styles: { fontSize: 12, color: '#666', maxLine: 2, textDecoration: ['line-through'] } },
              '小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务'
            ),
            drawInlineBlock(h),
          ]
        ),
      ]),
    ]
  )
}
function drawButton(h, text = 'text', options = {}) {
  return h(
    'view', Object.assign({
      styles: {
        height: 20,
        backgroundColor: '#ff6c79',
        borderRadius: 10,
        borderColor: '#fff',
        margin: 2,
        display: 'inline-block',
        paddingLeft: 10,
        paddingRight: 10,
        lineHeight: 20,
        verticalAlign: 'middle',
      },
      on: {
        click(e) {
          console.log(e)
        }
      }
    }, options),
    [
      h(
        'text',
        {
          styles: {
            color: options.color || '#fff',
            textAlign: 'center',
            fontSize: 11,
          },
        },
        text
      ),
    ]
  )
}
function drawBox(h) {
  return h(
    'view',
    {
      styles: {},
    },
    [
      h(
        'view',
        {
          styles: {
            display: 'inline-block',
            width: 40,
            verticalAlign: 'middle',
          },
        },
        [h('text', {}, '事事顺遂遂')]
      ),
      h(
        'view',
        {
          styles: {
            display: 'inline-block',
            width: 40,
            verticalAlign: 'top',
          },
        },
        [h('text', {}, '事事')]
      ),
      h(
        'view',
        {
          styles: {
            display: 'inline-block',
            width: 40,
            verticalAlign: 'bottom',
          },
        },
        [h('text', {}, '事事顺遂事事顺遂')]
      ),
    ]
  )
}
function drawInlineBlock(h) {
  let buttonList = [0, 0, 0, 0, 0, 0, 0].map((item, index) => {
    return h(
      'view',
      {
        styles: {
          height: 20,
          backgroundColor: '#ff6c79',
          borderRadius: 2,
          borderColor: '#fff',
          margin: 2,
          paddingLeft: 10,
          paddingRight: 10,
          display: 'inline-block',
          lineHeight: 20
        },
      },
      [
        h(
          'text',
          {
            styles: {
              lineHeight: 16,
              color: '#fff',
              fontSize: 11,
            },
          },
          `查看${index}`
        ),
      ]
    )
  })
  return h(
    'view',
    {
      styles: {
        borderTopWidth: 0.5,
        borderColor: '#ccc',
        paddingTop: 4,
        marginTop: 4,
        textAlign: 'right'
      },
    },
    [
      ...buttonList,
    ]
  )
}
function drawCard(h) {
  return h(
    'view',
    {
      styles: {
        backgroundColor: '#ff6c79',
        margin: 10,
        padding: [10, 20],
        borderRadius: 6,
        borderWidth: 1,
        borderColor: '#ff6c79',
        borderStyle: 'dash',
        shadowColor: '#999',
        shadowBlur: 20,
        shadowOffsetY: 10,
        position: 'relative'
      },
    },
    [
      h('view', {}, [
        h(
          'text',
          {
            styles: { color: '#fff' },
          },
          '总资产(元)'
        ),
      ]),
      h('view', { styles: { display: 'flex', justifyContent: 'flex-start' } }, [
        h('view', { styles: { flex: 1 } }, [
          h(
            'text',
            { styles: { fontSize: 20, fontWeight: 700, color: '#Fff' } },
            '23.43'
          ),
        ]),
        h('view', { styles: { flex: 1, textAlign: 'right' } }, [
          h(
            'view',
            {
              styles: {
                height: 20,
                backgroundColor: '#fff',
                borderRadius: 10,
                borderColor: '#fff',
                margin: 2,
                display: 'inline-block',
                paddingLeft: 10,
                paddingRight: 10
              },
              on: {
                click(e) {
                  console.log(e)
                }
              }
            },
            [
              h(
                'text',
                {
                  styles: {
                    lineHeight: 16,
                    color: '#ff6c79',
                    textAlign: 'center',
                    fontSize: 11,
                  },
                },
                '我的信息'
              ),
            ]
          )
        ]),
      ]),
      h('view', { styles: { lineHeight: 30 } }, [
        h(
          'text',
          { styles: { color: '#fff', fontSize: 12, lineHeight: 20, verticalAlign: 'middle' } },
          '最新收益0.00'
        ),
        h(
          'view',
          {
            styles: {
              display: 'inline-block',
              marginLeft: 10,
              height: 16,
              borderRadius: 8,
              paddingLeft: 5,
              paddingRight: 5,
              backgroundColor: '#666',
              verticalAlign: 'middle'
            },
          },
          [
            h(
              'text',
              { styles: { fontSize: 10, lineHeight: 16, color: '#fff' } },
              '赠送权益'
            ),
          ]
        ),
      ]),
      h(
        'view',
        {
          styles: {
            display: 'flex',
            marginTop: 20,
            paddingTop: 20,
            borderTopWidth: 0.5,
            borderColor: '#fff',
            alignItems: 'flex-end',
            color: 'yellow',
            textAlign: 'center'
          },
        },
        [
          h('view', { styles: { flex: 1, } }, [
            h('text', { styles: {} }, '风险评测'),
            h(
              'text',
              { styles: {} },
              '风险评测风险评测风险评测'
            ),
          ]),
          h(
            'view',
            {
              styles: {
                flex: 1,
              },
            },
            [
              h('text', { styles: { width: '100%' } }, '我的定投'),
              h('text', { styles: {} }, '风险评测'),
            ]
          ),
          h(
            'view',
            {
              styles: {
                flex: 1,
                verticalAlign: 'middle',
              },
            },
            [
              h('text', { styles: {} }, '优惠券'),
              h('text', { styles: {} }, '风险评测'),
            ]
          ),
        ]
      ),
    ]
  )
}
function drawScrollView(h) {
  return h(
    'scrollview',
    {
      styles: { direction: 'y', height: 200 },
    },
    [
      drawListItem(h, 'list1'),
      drawListItem(h, 'list2'),
      drawListItem(h, 'list3'),
      drawListItem(h, 'list4'),
    ]
  )
}
function drawScrollViewX(h) {
  return h(
    'scrollview',
    {
      styles: {
        direction: 'x',
        whiteSpace: 'nowrap',
      },
    },
    [0, 0, 0, 0, 0, 0, 0, 0, 0].map((item, index) => {
      return h(
        'view',
        {
          styles: {
            display: 'inline-block',
            padding: 10,
          },
        },
        [h('text', {}, '导航' + index)]
      )
    })
  )
}
function drawAbsolute(h) {
  return h('view', { styles: { position: 'absolute', top: 10, left: 10, zIndex: 10 } }, [drawButton(h, 'Absolute')])
}

function drawTicket(h) {
  return h('view', {
    styles: {
      backgroundColor: ['#eac4a3', '#d0916a'],
      margin: 10,
      padding: 10,
      borderRadius: 14,
      overflow: 'hidden',
      position: 'relative'
    }
  }, [
    h('view', {
      styles: {
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'center',
        padding: 20,
        borderRadius: 14
      }
    }, [
      h('view', {
        styles: {
          textAlign: 'center',
          width: 70,
          marginRight: 10
        }
      }, [
        h('view', { styles: { fontSize: 24, color: '#d0916a' } }, [h('text', {}, '¥500')]),
        h('view', { styles: { fontSize: 10, color: '#9a9a9a' } }, [h('text', {}, '无门槛使用')])
      ]),
      h('view', {
        styles: {
          flex: 1,
          paddingLeft: 10,
          borderLeftWidth: 0.5,
          borderColor: '#eac4a3'
        }
      }, [
        h('view', { styles: { fontSize: 14, fontWeight: 600, color: '#333' } }, [h('text', {}, '随机券¥20-300')]),
        h('view', { styles: { fontSize: 11, color: '#9a9a9a' } }, [h('text', {}, '领取后30天内可用')]),
      ]),
      h('view', {
        styles: {
          width: 60,
          textAlign: 'right'
        }
      }, [
        h('view', {
          styles: {
            display: 'inline-block',
            fontSize: 12,
            borderRadius: 12,
            padding: [0, 10],
            backgroundColor: '#d0916a',
            color: '#fff'
          }
        }, [
          h('text', { styles: { lineHeight: 24, } }, '领取')
        ])
      ])
    ]),
    h('view', {
      styles: {
        position: 'absolute',
        marginTop: -10,
        left: -10,
        top: '50%',
        width: 20,
        height: 20,
        backgroundColor: '#eac4a3',
        borderRadius: 10
      }
    }),
    h('view', {
      styles: {
        position: 'absolute',
        marginTop: -10,
        right: -10,
        top: '50%',
        width: 20,
        height: 20,
        backgroundColor: '#d0916a',
        borderRadius: 10
      }
    }),
  ])
}

function Dialog(h, options) {
  const instance = h('view', Object.assign({
    attrs: { className: 'dialog' }, styles: {
      position: 'absolute', top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    },
    on: {
      click() {
        instance.remove()
      }
    }
  }, options), [
    h('view', {
      styles: {
        width: 300,
        padding: 20,
        borderRadius: 4,
        backgroundColor: '#fff',
      },
      on: {
        click(e) {
          // 点击这里停止冒泡，阻止关闭弹窗
          e.stopPropagation()
        }
      }
    }, [
      h('view', { styles: { textAlign: 'center', fontWeight: 'bold', fontSize: 20, borderBottomWidth: 0.5, borderColor: '#ccc', lineHeight: 30 } }, [h('text', {}, options.title || 'Notice')]),
      h('view', { styles: { paddingTop: 20, color: '#666' } }, [h('text', {}, options.content || '')])
    ])
  ])
  return instance
}


const data = {
  date: '2016-05-02',
  name: '王小虎',
  province: '上海',
  city: '普陀区',
  address: '上海市普陀区金沙江路 1518 弄',
  zip: 200333,
}
function getTableData(count = 100) {
  let list = []
  for (let i = 0; i < count; i++) {
    list.push(data)
  }
  return list
}
function drawTable(h) {
  const tableData = getTableData(5000)
  const tr = {
    width: 700,
    display: 'flex',
    borderBottomWidth: 0.5,
    borderColor: '#999',
    padding: [10, 0],
  }
  const td = {
    flex: 1,
    color: '#666',
    padding: [0, 5],
    display: 'block',
    maxLine: 1,
  }
  const th = {
    flex: 1,
    padding: [0, 5],
    display: 'block',
    maxLine: 1,
    color: '#333',
    textAlign: 'center',
  }
  const tdFirst = {
    ...td,
    color: '#333',
    textAlign: 'center',
    fontWeight: 800
  }
  return [
    h('view', {
      styles: tr
    }, ['序号', '日期', '姓名', '地区', '城市', '详细地址', '邮编'].map(item => h('text', { styles: th }, item))),
    ...tableData.map((item, index) => h('view', { styles: tr }, [
      h('text', { styles: tdFirst }, index + 1),
      h('text', { styles: td }, item.date),
      h('text', { styles: td }, item.name),
      h('text', { styles: td }, item.province),
      h('text', { styles: td }, item.city),
      h('text', { styles: td }, item.address),
      h('text', { styles: td }, item.zip),
    ]))
  ]
}


function setLayer(_layer) {
  layer = _layer
}
function ontouchstart(e) {
  e.preventDefault()
  layer.eventManager.touchstart(e.pageX || e.touches[0].pageX || 0, e.pageY || e.touches[0].pageY || 0)
}
function ontouchmove(e) {
  e.preventDefault()
  layer.eventManager.touchmove(e.pageX || e.touches[0].pageX || 0, e.pageY || e.touches[0].pageY || 0)
}
function ontouchend(e) {
  e.preventDefault()
  layer.eventManager.touchend(
    e.pageX || e.changedTouches[0].pageX || 0,
    e.pageY || e.changedTouches[0].pageY || 0
  )
}
function onClick(e) {
  e.preventDefault()
  layer.eventManager.click(e.pageX, e.pageY)
}

function onmousewheel(e) {
  e.preventDefault()
  layer.eventManager.mousewheel(e.pageX, e.pageY, -e.deltaX, -e.deltaY)
}

